<template>
  <el-table
    :data="tableData"
    :height="tableConfig.height"
    :max-height="tableConfig.maxHeight || null"
    :stripe="tableConfig.stripe"
    :border="tableConfig.border"
    :size="tableConfig.size || 'small'"
    :fit="tableConfig.fit"
    :show-header="tableConfig.showHeader"
    :highlight-current-row="tableConfig.highlightCurrentRow"
    :current-row-key="tableConfig.currentRowKey"
    :row-class-name="rowClassName && tableRowClassName"
    :cell-class-name="cellClassNam && tableCellClassNam"
    :header-row-class-name="headerRowClassName && tableHeaderRowClassName"
  >
    <el-table-column
      v-for="(item,index) in column"
      :key="index"
      :label="item.label"
      :prop="item.prop"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["table", "column", "tableData", "rowClassName", "cellClassNam","headerRowClassName"],
  data() {
    return {
      tableConfig:{}
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      let $this = this;
      return $this.rowClassName(row, rowIndex);
    },
    tableCellClassNam({ row, column, rowIndex, columnIndex }) {
      let $this = this;
      return $this.cellClassNam(row, column, rowIndex, columnIndex);
    },
    tableHeaderRowClassName({row, rowIndex}){
      let $this = this;
      console.log(row, rowIndex)
      return $this.headerRowClassName({row, rowIndex});
    }
  },
  mounted: function() {
    let $this = this;
    // console.log($this.table)
    // $this.tableConfig = $this.table || {};
   
  }
};
</script>


<style scoped lang="scss">

</style>